doctype html
html
    head
        title 标签属性
    body
        //- 1.标签属性看起来和 html 相似，但他们的值只是一般的 javascript div(class="box") this is a div element
        //- 2.可直接运行 javascript 代码
        - var bool=true
        div(class=bool?"true":"false") //三元运算
        //- 3.当属性很多时，可以换行显示
        input(
            type="text"
            class="username"
            name="username"
            id="username"
        )
        //- 4.布尔属性(默认true)
        input(type='checkbox',checked)
        //- 5.样式属性可以是字符串，也可以是对象
        p(style="color:#999999;font-size:18px")
        h2(style={color:"#666666","font-size":"20px"})
        //- 6.类属性 可以是字符串，比如普通属性，也可以是数组
        div.foo
        div.foo.bar
        div(class="foo bar")
        div.bing(class=classes)
        //- 7.id属性
        div#box1
        div(id="box2")
        //- 由于div 是标签常见的选择，因此可以省略，div也是标签的默认值
        .box
        #wrapper
        #header.box.banner
        